{% schema %}
{
  "name": "Brilliant Display",
  "settings": [ 
    {
      "type": "text",
      "id": "resolution",
      "label": "Resolution",
      "default": "1920*1080"   
    },
    {
      "type": "text",
      "id": "brightness",
      "label": "Screen brightness",
      "default": "3000 nits"   
    },
    {
      "type": "text",
      "id": "desc",
      "label": "Desc",
      "default": "Sharp Clarity, Edge to Edge"   
    },
    {
      "type": "text",
      "id": "desc2",
      "label": "Secondary desc",
      "default": "600 nits entrance pupil brightness for sharp, clear visuals everywhere"   
    },
    {
      "type": "url",
      "id": "video",
      "label": "Video url mobile"
    },
    {
      "type": "url",
      "id": "video_poster",
      "label": "Video poster url mobile"
    },
    {
      "type": "url",
      "id": "video_pc",
      "label": "Video url PC"
    },
    {
      "type": "url",
      "id": "video_poster_pc",
      "label": "Video poster url PC"
    },
    {
      "type": "url",
      "id": "video_modal",
      "label": "Video url Modal"
    },
  ],
}
{% endschema %}

{%- style -%}
     .bg-{{ section.id }} {
       background: black;
     }
     #rokid-ar-joy-2-video-cut-1 {
       max-width: 100%;
     }
     #rokid-ar-joy-2-video-cut-1-box {
       position: relative;
       width: 100%;
       height: calc(100vh - 56px);
       background: black;
     }
     .rokid-ar-joy-2-video-cut-1-title {
            transform: translateY(220px);
           color: #ffffff;
           opacity: 0;
           font-family: HarmonyOS Sans;
           font-size: 36px;
           font-weight: bold;
           line-height: 100%;
           text-align: center;
           letter-spacing: -1.44px;
     }
     .video-box-{{ section.id }} {
       position: relative;
       width: 100vw;
     }
       .video-box-img-{{ section.id }} {
      position: absolute;
         width: 100%;
         z-index: -1;
      }

     #rokid-ar-joy-2-video-cut-1-container {
       width: 100%;
     }
     .video-box-devices-{{ section.id }} {
       text-align: center;
    transform: translateY(288px);
     }
      .video-box-devices-{{ section.id }} img {
            width: 105px;
       height: 117px;
      }
     .video-box-devices-video-{{ section.id }} {
        width: 100%;
       opacity: 0;
       transition: opacity 0.5s;
     }
     .video-box-video-{{ section.id }} {
       position: relative;
       width: 100%;
       height: 100%;
     }
    .video-box-video-{{ section.id }} #video-{{ section.id }} {
      width: 100%;
      opacity: 0;
      transition: opacity 0.5s;
    }
  .video-overlay-{{ section.id }} {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background-color: rgba(0, 0, 0, 0.7);
          display: flex;
          justify-content: center;
          align-items: center;
          transition: opacity 0.5s;
          opacity: 0;
    z-index: 9;
        }

        .play-button {
          width: 187px;
          height: 30px;
          cursor: pointer;
        }

        .play-button:focus {
          outline: none;
        }
    #video-{{ section.id }} {
      position: relative;
      z-index: 1;
    }

    .video_v2 {
      width: 100%;
    }
    .video_v2_play_btn {
      width: 50%;
      padding-bottom: 20%;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translateX(-50%) translateY(-50%);
    }
{%- endstyle -%}

<div class="bg-{{ section.id }} position-relative">
  <div id="rokid-ar-joy-2-video-cut-1-container">
    <div class="position-relative">
      <video
        playsinline
        class="video_v2 d-xl-none"
        id="video_v2"
        muted
        preload="auto"
        poster="{{ section.settings.video_poster }}"
      >
        <source src="{{ section.settings.video }}" type="video/mp4">
      </video>
      <video
        playsinline
        class="video_v2 video_v2_pc d-none d-xl-block"
        id="video_v2_pc"
        muted
        preload="auto"
         poster="{{ section.settings.video_poster_pc }}"
      >
         <source src="{{ section.settings.video_pc }}" type="video/mp4">
      </video>
      <div
        class="video_v2_play_btn"
        data-bs-toggle="offcanvas"
        data-bs-target="#offcanvasBottom-{{ section.id }}"
        aria-controls="offcanvasBottom"
      ></div>
    </div>
  </div>
  <div class="parameter-{{ section.id }} px-4 pb-7 row container mx-auto justify-content-center d-xl-none">
        <div class="parameter-item-{{ section.id }} parameter-item-3-{{ section.id }} anim col col-12 col-xl-4 b-{{ section.id }}">
      <div class="parameter-item-value-text-{{ section.id }} me-4 b-3-{{ section.id }}" style="width: 228px">
        {{ section.settings.desc }}
      </div>
    </div>
    <div class="parameter-item-{{ section.id }} anim col col-12 col-xl-6 b-{{ section.id }}">
      <div class="parameter-item-label-{{ section.id }}">Resolution</div>
      <div class="parameter-item-value-{{ section.id }}">
        <div class="parameter-item-value-text-{{ section.id }} me-4">{{ section.settings.resolution }}</div>
        <div class="parameter-item-value-unit-{{ section.id }}">Crisp</div>
      </div>
    </div>
    <div class="parameter-item-{{ section.id }} anim col col-12 col-xl-6 b-{{ section.id }} ps-xl-8">
      <div class="parameter-item-label-{{ section.id }}">Screen brightness</div>
      <div class="parameter-item-value-{{ section.id }}">
        <div class="parameter-item-value-text-{{ section.id }} me-4">{{ section.settings.brightness }}</div>
        <div class="parameter-item-value-unit-{{ section.id }}">Dazzling</div>
      </div>
    </div>
    <div class="parameter-item-desc-{{ section.id }} anim col col-12 col-xl-8 b-{{ section.id }} ps-xl-8 px-0">
      {{ section.settings.desc2 }}
    </div>
  </div>
   <div class="parameter-{{ section.id }} px-4 pb-7 row container mx-auto justify-content-center d-xl-flex d-none">
<div class="parameter-item-{{ section.id }} anim col col-12 col-xl-6 b-{{ section.id }} animated">
  <div class="parameter-item-label-{{ section.id }}">Resolution</div>
  <div class="parameter-item-value-{{ section.id }}">
    <div class="parameter-item-value-text-{{ section.id }} me-4">{{ section.settings.resolution }}</div>
    <div class="parameter-item-value-unit-{{ section.id }}">Crisp</div>
  </div>
</div>
<div class="parameter-item-{{ section.id }} anim col col-12 col-xl-6 b-{{ section.id }} ps-xl-8 animated">
  <div class="parameter-item-label-{{ section.id }}">Screen brightness</div>
  <div class="parameter-item-value-{{ section.id }}">
    <div class="parameter-item-value-text-{{ section.id }} me-4">{{ section.settings.brightness }}</div>
    <div class="parameter-item-value-unit-{{ section.id }}">Dazzling</div>
  </div>
</div>
  <div
    class="parameter-item-{{ section.id }} parameter-item-3-{{ section.id }} anim col col-12 col-xl-4 b-{{ section.id }} animated">
    <div class="parameter-item-value-text-{{ section.id }} me-4 b-3-{{ section.id }}" style="width: 228px">
      {{ section.settings.desc }}
    </div>
  </div>
  <div class="parameter-item-desc-{{ section.id }} anim col col-12 col-xl-8 b-{{ section.id }} ps-xl-8 px-0 animated">
    {{ section.settings.desc2 }}
  </div>
  </div>
  
</div>

   

{%- style -%}
  .parameter-{{ section.id }} {
    background: black;
  }
  .parameter-item-{{ section.id }} {
    padding-left: 0;
    padding-right: 0;
    padding-bottom: 54px;
  }
  .parameter-item-label-{{ section.id }} {
    font-family: HarmonyOS Sans;
    font-size: 16px;
    font-weight: bold;
    line-height: 100%;
    display: flex;
    align-items: center;
    letter-spacing: -0.56px;
    color: #86868B;
    margin-bottom: 8px;
  }
  .parameter-item-value-{{ section.id }} {
    display: flex;
    align-items: center;
  }
  .parameter-item-value-text-{{ section.id }} {
    font-family: HarmonyOS Sans;
    font-size: 36px;
    font-weight: bold;
    line-height: 120%;
    letter-spacing: -0.52px;
    background: linear-gradient(180deg, #29B3FF 0%, #007AFF 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
  }
  .parameter-item-3-{{ section.id }} .parameter-item-value-text-{{ section.id }} {
    font-size: 30px;
  }
  .parameter-item-value-unit-{{ section.id }} {
    font-family: HarmonyOS Sans;
    font-size: 16px;
    font-weight: bold;
    line-height: 100%;
    display: flex;
    align-items: center;
    letter-spacing: -0.56px;
    color: #86868B;
  }
  .parameter-item-desc-{{ section.id }} {
    font-family: HarmonyOS Sans;
    font-size: 16px;
    font-weight: bold;
    line-height: 100%;
    display: flex;
    align-items: center;
    letter-spacing: -0.56px;
    color: #86868B;
  }
{%- endstyle -%}

<script>
  const video_v2 = document.querySelector('#video_v2');
  const video_v2_pc = document.querySelector('#video_v2_pc');
  const video_container = document.querySelector('#rokid-ar-joy-2-video-cut-1-container');
  let isPlay = false;
  window.addEventListener('scroll', function() {
     const video = (window.innerWidth >=1280 ? video_v2_pc : video_v2)
     const rect = video.getBoundingClientRect();
      const offsetTop = rect.top;
     if (offsetTop <= window.innerHeight * 0.2 && !isPlay) {
       video.play();
       isPlay = true;
     }
  })
  video_v2.addEventListener('ended', () => {
    video_container.style.height = "auto";
  });
  video_v2_pc.addEventListener('ended', () => {
    video_container.style.height = "auto";
  });
</script>

<div
  class="offcanvas offcanvas-bottom"
  tabindex="-1"
  id="offcanvasBottom-{{ section.id }}"
  aria-labelledby="offcanvasBottomLabel"
  style="height: 90vh;"
>
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasBottomLabel"></h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body small offcanvas-body-{{ section.id }} pb-4 container">
    <video
      style="width: 100%"
      controls
    >
      <source src="{{ section.settings.video_modal }}" type="video/mp4">
    </video>
  </div>
</div>

<style>
  @media (min-width: 1280px) {
    .b-{{ section.id }}:nth-child(1):after {
      content: "";
      position: absolute;
      left: 0;
      bottom: 0;
       width: 100%;
      height: 1px;
      background:  linear-gradient(90deg, rgba(134, 134, 139, 0) 0%, #86868B 53% ) ;
    }
    .b-{{ section.id }}:nth-child(1):before {
     content: "";
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      width: 1px;
       height: 100%;
     background:  linear-gradient(180deg, rgba(134, 134, 139, 0) 0%, #86868B 53% ) ;
    }
    .b-{{ section.id }}:nth-child(2):after {
      content: "";
      position: absolute;
      left: 0;
      bottom: 0;
         width: 100%;
      height: 1px;
      background:   linear-gradient(270deg, rgba(134, 134, 139, 0) 0%, #86868B 53% ) ;
    }
   .b-{{ section.id }}:nth-child(3):after {
     content: "";
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      width: 1px;
     height: 100%;
     background: linear-gradient(0deg, rgba(134, 134, 139, 0) 0%, #86868B 53% ) ;
    }
    .parameter-item-{{ section.id }} {
      padding-top: 20px;
    }
    .parameter-item-{{ section.id }}:nth-child(2) {
      padding-left: 100px!important;
    }
    .parameter-item-label-{{ section.id }} {
      font-size: 20px;
    }
    .parameter-item-value-text-{{ section.id }} {
      font-size: 60px;
    }
    .parameter-item-{{section.id}}:nth-child(3) {
       padding-top: 0px !important;
        padding-bottom: 0px !important;
        height: 174px;
        display: flex;
        align-items: center;
    }
    .parameter-item-{{section.id}}:nth-child(3) .parameter-item-value-text-{{ section.id }} {
      font-size: 32px;
      width: 260px!important;
    }
    .parameter-item-desc-{{ section.id }} {
      padding-left: 100px!important;
      font-size: 20px!important;
    }
    .parameter-item-value-unit-{{ section.id }} {
      font-size: 24px;
    }
    .b-3-{{ section.id }} {
      font-size: 24px;
      width: 206px!important;
    }
    .parameter-{{ section.id }} {
      padding-bottom: 180px!important;
    }
  }

  @media (min-width: 1440px) {
        .b-{{ section.id }}:nth-child(1):after {
      content: "";
      position: absolute;
      left: 0;
      bottom: 0;
       width: 100%;
      height: 1px;
      background:  linear-gradient(90deg, rgba(134, 134, 139, 0) 0%, #86868B 53% ) ;
    }
    .b-{{ section.id }}:nth-child(1):before {
     content: "";
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      width: 1px;
       height: 100%;
     background:  linear-gradient(180deg, rgba(134, 134, 139, 0) 0%, #86868B 53% ) ;
    }
    .b-{{ section.id }}:nth-child(2):after {
      content: "";
      position: absolute;
      left: 0;
      bottom: 0;
         width: 100%;
      height: 1px;
      background:   linear-gradient(270deg, rgba(134, 134, 139, 0) 0%, #86868B 53% ) ;
    }
   .b-{{ section.id }}:nth-child(3):after {
     content: "";
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      width: 1px;
     height: 100%;
     background: linear-gradient(0deg, rgba(134, 134, 139, 0) 0%, #86868B 53% ) ;
    }
    .parameter-item-{{ section.id }} {
      padding-top: 20px;
    }
    .parameter-item-{{ section.id }}:nth-child(2) {
      padding-left: 100px!important;
    }
    .parameter-item-label-{{ section.id }} {
      font-size: 20px;
    }
    .parameter-item-value-text-{{ section.id }} {
      font-size: 80px;
    }
    .parameter-item-{{section.id}}:nth-child(3) {
      padding-top: 0px !important;
        padding-bottom: 0px !important;
        height: 198px;
        display: flex;
        align-items: center;
    }
    .parameter-item-{{section.id}}:nth-child(3) .parameter-item-value-text-{{ section.id }} {
      font-size: 40px;
      width: 260px!important;
    }
    .parameter-item-desc-{{ section.id }} {
      padding-left: 100px!important;
       font-size: 20px!important;
    }
    .parameter-item-value-unit-{{ section.id }} {
      font-size: 24px;
    }
    .b-3-{{ section.id }} {
      font-size: 24px;
          width: 206px!important;
    }
    .parameter-{{ section.id }} {
      padding-bottom: 180px!important;
    }
  }
</style>
